<!--
 * @Author: your name
 * @Date: 2021-04-24 09:00:45
 * @LastEditTime: 2021-04-27 10:55:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \柏瑞平台\baiui\src\components\HelloWorld.vue
-->
<template>
  <div class="sorce">
    <div class="main common">
      <div class="nav_x">
        <ul>
          <li @click="rout1">首页 ></li>
          <li @click="rout2">{{ lu1 }} ></li>
          <li>{{ lu2 }}</li>
        </ul>
      </div>
      <div class="main_box">
        <p class="titles">{{ datags.cate }}</p>
        <!-- main 盒子 -->
        <div class="flex">
          <!-- 左 -->
          <div class="box_left">
            <img alt="" :src="datags.image" />
            <img alt="" class="imgpadd" :src="datags.file" />
            <p class="cont">
              {{ datags.content }}
            </p>
          </div>
          <!-- 右 -->
          <div class="box_right">
            <div class="top_box">
              <div class="but">
                <span class="span1" style="cursor:pointer" >vip免费下载</span>
                <!-- 未收藏 -->
                <span class="span2" v-show="aa == 1" @click="sc(2)" style="cursor:pointer" >
                  <div class="v1">
                    <img alt="" src="../assets/sc11.png" />
                  </div>
                  <div class="v2">收藏</div>
                </span>
                <span class="span2" v-show="aa == 2" @click="sc(1)" style="cursor:pointer" >
                  <div class="v1">
                    <img alt="" src="../assets/ysc11.png" />
                  </div>
                  <div class="v2">已收藏</div>
                </span>
              </div>

              <div class="contents">
                <p>素材分类：{{ datags.title }}</p>
                <p>类型：{{ datags.file_type }}</p>
                <p>尺寸像素:567X800px</p>
                <p>文件大小:{{ datags.file_size }}</p>
                <p>{{ datags.param[0].title }}：{{ datags.param[0].value }}</p>
                <p>{{ datags.param[1].title }}：{{ datags.param[1].value }}</p>
                <p>上传时间：{{ datags.updated_at }}</p>
              </div>
            </div>
            <div class="top_box2">
              <p class="tits">相关素材</p>
              <div class="contents">
                <div class="flex">
                  <span v-for="(item, index) in listsc" :key="index">
                    <img :src="item.image" alt="" />
                  </span>
                </div>
                <p class="cont">
                  声明:柏瑞网是正版商业图库，所有原创作品及预览图均受著作权法保护，著作权及相关权利归本网站所有。个人VIP无版权授权，获取版权需开通企业VIP。
                  (本素材使用的未标明可商用的字体仅供参考，商用请替换。)
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 相关推荐 -->
        <div class="related">
          <p class="titles">相关推荐</p>
          <div class="related_flex">
            <dl
              v-for="(item, index) in relalist"
              :key="index"
              @mouseover="jg(index)"
              @mouseout="lk()"
              style="cursor:pointer" 
            >
              <dt><img :src="item.image" alt="" /></dt>
              <dd v-show="shows == index">{{ item.title }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// swiper options example:
import { casecont, sucaicont } from "@/api";
export default {
  name: "Carrousel",
  data() {
    return {
      shows: null,
      lu1: "素材库",
      lu2: "详情",
      listsc: [],
      relalist: [],
      name: null,
      datags: {},
      aa: 1,
    };
  },
  methods: {
    jg(a) {
      this.shows = a;
    },
    lk() {
      this.shows = -1;
    },
    // 首页
    rout1() {
      this.$router.push("/");
    },
    // 实例和素材库
    rout2() {
      if (this.name == 3) {
        this.$router.push("/Example");
      } else {
        this.$router.push("/Materlibrary");
      }
    },
    // shili接口
    async getCasescont(a) {
      await casecont(a).then((e) => {
        console.log(e.data);
        this.relalist = e.data.about_tuijian;
        this.listsc = e.data.about_shili;
        this.datags = e.data.data;
      });
    },
    // 素材接口
    async getSucaicont(a) {
      await sucaicont(a).then((e) => {
        console.log(e);
        this.relalist = e.data.about_tuijian;
        this.listsc = e.data.about_shili;
        this.datags = e.data.data;
      });
    },
    // 收藏
    sc(a) {
      this.aa = a;
    },
  },
  created() {
    let ids = this.$route.query.id;
    // console.log(ids);
    let name = this.$route.query.name;
    this.name = name;
    // console.log(name);
    // 3为实例 4 为 素材
    if (name == 3) {
      // 实例接口
      (this.lu1 = "实例"), (this.lu2 = "实例详情");
      this.getCasescont(ids);
    } else {
      // 素材接口
      (this.lu1 = "素材"), (this.lu2 = "素材详情");
      this.getSucaicont(ids);
    }
  },
};
</script>
<style lang="scss" scoped>
.sorce {
  .main {
    // border: 1px solid red;
    margin: 0 auto;

    .main_box {
      margin-top: 30px;
      box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.2);
      padding: 0 0 31px 0;
      border-radius: 15px;
      // 标题
      .titles {
        padding: 10px 0 10px 20px;
      }

      // 中间flexbox
      .flex {
        // border: 1px solid red;
        display: flex;
        justify-content: space-around;

        .box_left {
          // border: 1px solid red;
          width: 731px;

          img {
            width: 100%;
          }

          .cont {
            font-size: 16px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #999999;
            line-height: 30px;
          }

          .imgpadd {
            padding: 10px 0;
          }
        }

        .box_right {
          // border: 1px solid red;
          width: 404px;

          .top_box {
            box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 50px 0 70px 0;
            // border: 1px solid red;
            .but {
              padding: 50px 0;
              // border: 1px solid red;
              display: flex;
              justify-content: space-around;

              span {
                width: 168px;
                height: 51px;
                display: block;
                background: #f26522;
                border-radius: 25px;
                line-height: 51px;
                text-align: center;
                color: #fff;
              }

              .span2 {
                background: #fbf0ea;
                color: #f26522;
                border: 1px solid #f26522;
                display: flex;
                width: 168px;
                padding: 0 42px;
                justify-content: space-between;

                div {
                  height: 51px;
                  line-height: 51px;
                  img {
                    padding-top: 13px;
                    width: 31px;
                  }
                }
              }
            }

            .contents {
              font-size: 18px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #333333;

              p {
                width: 80%;
                margin: 0 auto;
                letter-spacing: 1px;
                padding: 10px 0;
              }
            }
          }

          .top_box2 {
            // border: 1px solid red;
            margin-top: 30px;
            box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 10px 0 45px 0;

            .tits {
              font-size: 22px;
              padding: 10px 10px;
            }

            .contents {
              .flex {
                // border: 1px solid red;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 95%;
                margin: 0 auto;
                padding: 10px 0;
                span {
                  width: 190px;
                  height: 155px;
                  margin-top: 10px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }

              .cont {
                font-size: 16px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #999999;
                line-height: 30px;
                width: 98%;
                margin: 0 auto;
              }
            }
          }
        }
      }

      .related {
        margin-top: 53px;

        .titles {
          padding: 0 20px;
          font-size: 22px;
        }

        .related_flex {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

          dl {
            text-align: center;
            margin-top: 20px;
            position: relative;
            width: 266px;
            height: 261px;
            img {
              width: 100%;
            }
            dd {
              position: absolute;
              bottom: -7px;
              text-align: center;
              width: 100%;
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 0px 0px 5px 5px;
              color: #fff;
              padding: 10px 0;
            }
          }
        }
      }
    }
  }
}
</style>
